<template>
  <!-- 一个.vue文件就是一个组件, 一个项目中只有一个根组件 App.vue -->
  <!-- 一个.vue文件内部一般是由三部分组成: template , script , style -->
  <!-- template 内部写标签 , 只能有一个根元素 -->
  <!-- script 内部写js逻辑 , 内部需要 export default {}, 所有的js代码都需要写在这里 -->
  <!-- style 内部写css样式 , 可以通过lang='xx'指定style内部的css语法 , 可以通过设置 scoped 属性 让多个.vue文件之间的样式互不影响 -->
  <div id="app">
    <transition name="fade" mode="out-in">
      <router-view></router-view>
    </transition>

    <!-- <div class="footer">
      <router-link to="/home">首页</router-link>
      <router-link to="/mine">我的</router-link>
      <router-link to="/more">更多</router-link>
      <router-link to="/order">订单</router-link>
      <router-link to="/login">登录</router-link>
      <router-link to="/register">注册</router-link>
    </div> -->
<van-tabbar v-model="active" route>
  <van-tabbar-item icon="wap-home-o" to="/home">首页</van-tabbar-item>
  <van-tabbar-item icon="manager-o" to="/mine">我的</van-tabbar-item>
  <van-tabbar-item icon="qr" to="/more">更多</van-tabbar-item>
  <van-tabbar-item icon="logistics" to="/order">订单</van-tabbar-item>
  <van-tabbar-item icon="envelop-o" to="/login">登录</van-tabbar-item>
  <van-tabbar-item icon="other-pay" to="/register">注册</van-tabbar-item>
</van-tabbar>
    
  </div>
</template>

<script>

export default {

}
</script>

<style lang="scss">
*{
  margin: 0;
  padding: 0;
}
.footer{
  display: flex;
  justify-content: space-around;
  align-content: center;
  padding: 10px 0;
  position: fixed;
  bottom: 0;
  width: 100%;
  box-sizing: border-box;
  border-top: 1px solid #ccc;
  background-color: #ccc;
  margin-top: 10px;
}

//入场动画
.fade-enter{//动画开始时的状态
  transform: scale(0);
}
.fade-enter-active{
  transition: all 0.5s;
}
.fade-enter-to{//动画结束时的状态
  transform: scale(1);

}
a{
  text-decoration: none;
  color: black;
}
</style>
